<script setup lang="ts">

import {onMounted, reactive, ref} from "vue";
import GenTemplateFileBO from "@/domain/bo/GenTemplateFileBO";
import genTemplateService from "@/service/GenTemplateService";
import {ElMessage, FormInstance, FormRules} from "element-plus";
import {useRouter} from "vue-router";
import CodeEditor from "@/components/code-editor/Index.vue";
import StringUtils from "@/utils/StringUtils";
import GlobalConstant from "@/domain/constants/GlobalConstant";

const router = useRouter();

const groupId: string = router.currentRoute.value.query.groupId as string;
const tmpId: string = router.currentRoute.value.query.tmpId as string;

//========================== 生命周期 ==========================
const codeEditorRef = ref<any>();
const fileContent = ref("");
const genTemplateFileBO = ref(new GenTemplateFileBO());
onMounted(() => {
  if (StringUtils.isNotBlank(tmpId)) {
    //获取文件信息
    genTemplateService.getTempById(tmpId)
        .then(res => {
          genTemplateFileBO.value.coverFormDataSourceInfoVO(res)
        })
    //下载文件
    genTemplateService.downloadTempById(tmpId)
        .then(res => {
          fileContent.value = res;
          codeEditorRef.value.setContent(res);
        })
  }else {
    genTemplateFileBO.value.groupId = groupId;
  }
})

//========================== 按钮事件 ==========================
async function saveGenTemplateFile() {
  let flag = false;
  try {
    if (StringUtils.isBlank(genTemplateFileBO.value.id as string)) {
      genTemplateFileBO.value.file = new Blob([fileContent.value], {type: "text/plain"})
      let res = await genTemplateService.addTmp(genTemplateFileBO.value);
      flag = true;
      ElMessage.success(GlobalConstant.SAVE_SUCCESS_MSG);
    } else {
      genTemplateFileBO.value.file = new Blob([fileContent.value], {type: "text/plain"})
      let res = await genTemplateService.editTmpById(genTemplateFileBO.value.id, genTemplateFileBO.value);
      flag = true;
      ElMessage.success(GlobalConstant.SAVE_SUCCESS_MSG);
    }
  } catch (error) {
    ElMessage.error(GlobalConstant.SAVE_ERROR_MSG + error.msg);
  }
  return flag;
}

//========================== 回调事件 ==========================
function saveHandle(ruleFormRef: FormInstance) {
  ruleFormRef.validate(async (valid) => {
    if (valid) {
      if (await saveGenTemplateFile()) {
        router.back()
      }
    }
  });
}

function contentChange(content: string) {
  fileContent.value = content;
}

//========================== 表单校验规则 ==========================
const genTemplateFileFormRef = ref<FormInstance>()
const rules = reactive<FormRules<GenTemplateFileBO>>({
  genFileName: [
    {
      required: true,
      message: '必填',
      trigger: 'blur'
    },
  ],
  model: [
    {
      required: true,
      message: '必填',
      trigger: 'blur',
    },
  ],
  groupId: [
    {
      required: true,
      message: '必填',
      trigger: 'blur',
    },
  ],
  templateName: [
    {
      required: true,
      message: '必填',
      trigger: 'blur',
    },
  ],
})
</script>

<template>
  <div>
    <el-form
        ref="genTemplateFileFormRef"
        :rules="rules"
        :model="genTemplateFileBO"
        label-width="120px"
        class="demo-ruleForm"
        status-icon
    >
      <el-form-item>
        <el-button type="primary" @click="saveHandle(genTemplateFileFormRef)">
          保存
        </el-button>
      </el-form-item>
      <el-form-item prop="templateName" label="模板名称">
        <el-input v-model="genTemplateFileBO.templateName"/>
      </el-form-item>
      <el-form-item prop="genFileName" label="生成文件名">
        <el-input v-model="genTemplateFileBO.genFileName"/>
      </el-form-item>
      <el-form-item prop="model" label="生成文件目录(多层 . 隔开)">
        <el-input v-model="genTemplateFileBO.model"/>
      </el-form-item>
      <el-form-item label="文件内容">
        <code-editor
            style="width: 100%"
            ref="codeEditorRef"
            :doc="fileContent"
            @content-change="contentChange"/>
      </el-form-item>
    </el-form>

  </div>
</template>

<style scoped lang="scss">

</style>